<!--
Camera
 -->
<template>
  <div class="container">
    <div id="cesiumContainer"> </div>
    <div id="loadingOverlay">
      <h1>Loading...</h1>
    </div>
    <div id="toolbar">
      <div id="viewChanged">View Changed</div>
      <div id="cameraChanged">Camera Changed</div>
    </div>
  </div>
</template>

<script>
  // import {
  //   aaa
  // } from '../../libs/js/Sandcastle-header.js'

  export default {
    name: "cesiumviewer",
    data() {
      return {
        viewer: {},
        referenceFramePrimitive: {},
        removeStart: null,
        removeEnd: null,
        removeChanged: null,
        viewChanged: {},
        cameraChanged: {},
      }
    },
    mounted() {
      var Cesium = this.Cesium;
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否显示动画控件
        homeButton: false, // 是否显示home键
        geocoder: false, // 是否显示地名查找控件
        baseLayerPicker: false, // 是否显示图层选择控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: true, // 是否全屏显示
        infoBox: true, // 是否显示点击要素之后显示的信息
        sceneModePicker: false, // 是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        orderIndependentTranslucency: false,
        shouldAnimate: true,
        scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
        selectionIndicator: false // 取消点击有绿框
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏ceisum标识
      //this.viewer.cesiumWidget.creditContainer.style.display = 'none'; //隐藏ceisum标识
      var viewer = new Cesium.Viewer("cesiumContainer");
      var scene = viewer.scene;
      var clock = viewer.clock;


      this.viewChanged = document.getElementById("viewChanged");

      this.cameraChanged = document.getElementById("cameraChanged");

      Sandcastle.addToolbarMenu([{
          text: "Camera Options",
        },
        {
          text: "Fly in a city",
          onselect: () => {
            console.log('this', this)
            this.reset();
            this.flyInACity();
            Sandcastle.highlight(this.flyInACity);
          },
        },
        {
          text: "Fly to San Diego",
          onselect: () => {
            this.reset();
            this.flyToSanDiego();
            Sandcastle.highlight(this.flyToSanDiego);
          },
        },
        {
          text: "Fly to Location with heading, pitch and roll",
          onselect: () => {
            this.reset();
            this.flyToHeadingPitchRoll();
            Sandcastle.highlight(this.flyToHeadingPitchRoll);
          },
        },
        {
          text: "Fly to My Location",
          onselect: () => {
            this.reset();
            this.flyToLocation();
            Sandcastle.highlight(this.flyToLocation);
          },
        },
        {
          text: "Fly to Rectangle",
          onselect: () => {
            this.reset();
            this.flyToRectangle();
            Sandcastle.highlight(this.flyToRectangle);
          },
        },
        {
          text: "View a Rectangle",
          onselect: () => {
            this.reset();
            this.viewRectangle();
            Sandcastle.highlight(this.viewRectangle);
          },
        },
        {
          text: "Set camera reference frame",
          onselect: () => {
            this.reset();
            this.setReferenceFrame();
            Sandcastle.highlight(this.setReferenceFrame);
          },
        },
        {
          text: "Set camera with heading, pitch, and roll",
          onselect: () => {
            this.reset();
            this.setHeadingPitchRoll();
            Sandcastle.highlight(this.setHeadingPitchRoll);
          },
        },
        {
          text: "View in ICRF",
          onselect: () => {
            this.reset();
            this.viewInICRF();
            Sandcastle.highlight(this.viewInICRF);
          },
        },
        {
          text: "Move events",
          onselect: () => {
            this.reset();
            this.cameraEvents();
            Sandcastle.highlight(this.cameraEvents);
          },
        },
        {
          text: "Camera changed event",
          onselect: () => {
            this.reset();
            this.cameraChanges();
            Sandcastle.highlight(this.cameraChanges);
          },
        },
        {
          text: "Fly from Los Angeles to Tokyo via Europe",
          onselect: () => {
            this.reset();
            this.flyOverLongitude();
            Sandcastle.highlight(this.flyOverLongitude);
          },
        },
        {
          text: "Look down during exaggerated flight",
          onselect: () => {
            this.reset();
            this.flyOverLongitudeWithPitch();
            Sandcastle.highlight(this.flyOverLongitudeWithPitch);
          },
        },
      ]);

      Sandcastle.addToolbarButton("Complete Flight", function() {
        scene.camera.completeFlight();
      });

      Sandcastle.addToolbarButton("Cancel Flight", function() {
        scene.camera.cancelFlight();
      });

      scene.morphComplete.addEventListener(function() {
        this.reset();
      });
      //Sandcastle_End
      Sandcastle.finishedLoading();

    },
    methods: {
      flyToSanDiego() {
        Sandcastle.declare(this.flyToSanDiego);
        let viewer = this.viewer
        let Cesium = this.Cesium
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
        });
      },
      flyToHeadingPitchRoll() {
        Sandcastle.declare(this.flyToHeadingPitchRoll);
        let viewer = this.viewer
        let Cesium = this.Cesium
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(-122.22, 46.12, 5000.0),
          orientation: {
            heading: Cesium.Math.toRadians(20.0),
            pitch: Cesium.Math.toRadians(-35.0),
            roll: 0.0,
          },
        });
      },
      flyToLocation() {
        Sandcastle.declare(this.flyToLocation);
        // Create callback for browser's geolocation
        let viewer = this.viewer
        let Cesium = this.Cesium

        function fly(position) {
          viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              position.coords.longitude,
              position.coords.latitude,
              1000.0
            ),
          });
        }
        // Ask browser for location, and fly there.
        navigator.geolocation.getCurrentPosition(fly);
      },
      viewRectangle() {
        Sandcastle.declare(this.viewRectangle);
        var west = -77.0;
        var south = 38.0;
        var east = -72.0;
        var north = 42.0;
        let viewer = this.viewer
        let Cesium = this.Cesium
        var rectangle = Cesium.Rectangle.fromDegrees(
          west,
          south,
          east,
          north
        );
        viewer.camera.setView({
          destination: rectangle,
        });

        // Show the rectangle.  Not required; just for show.
        viewer.entities.add({
          rectangle: {
            coordinates: rectangle,
            fill: false,
            outline: true,
            outlineColor: Cesium.Color.WHITE,
          },
        });
      },
      flyToRectangle() {
        Sandcastle.declare(this.flyToRectangle);
        let viewer = this.viewer
        let Cesium = this.Cesium

        var west = -90.0;
        var south = 38.0;
        var east = -87.0;
        var north = 40.0;
        var rectangle = Cesium.Rectangle.fromDegrees(
          west,
          south,
          east,
          north
        );

        viewer.camera.flyTo({
          destination: rectangle,
        });

        // Show the rectangle.  Not required; just for show.
        viewer.entities.add({
          rectangle: {
            coordinates: rectangle,
            fill: false,
            outline: true,
            outlineColor: Cesium.Color.WHITE,
          },
        });
      },
      setReferenceFrame() {
        Sandcastle.declare(this.setReferenceFrame);
        let viewer = this.viewer
        let Cesium = this.Cesium
        let scene = this.viewer.scene
        var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
        var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);

        // View in east-north-up frame
        var camera = viewer.camera;
        camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
        camera.lookAtTransform(
          transform,
          new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0)
        );

        // Show reference frame.  Not required.
        this.referenceFramePrimitive = scene.primitives.add(
          new Cesium.DebugModelMatrixPrimitive({
            modelMatrix: transform,
            length: 100000.0,
          })
        );
      },
      setHeadingPitchRoll() {
        Sandcastle.declare(this.setHeadingPitchRoll);
        let viewer = this.viewer
        let Cesium = this.Cesium
        var camera = viewer.camera;
        camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(
            -75.5847,
            40.0397,
            1000.0
          ),
          orientation: {
            heading: -Cesium.Math.PI_OVER_TWO,
            pitch: -Cesium.Math.PI_OVER_FOUR,
            roll: 0.0,
          },
        });
      },
      icrf(scene, time) {
        let viewer = this.viewer
        let Cesium = this.Cesium
        if (scene.mode !== Cesium.SceneMode.SCENE3D) {
          return;
        }
        var icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
        if (Cesium.defined(icrfToFixed)) {
          var camera = viewer.camera;
          var offset = Cesium.Cartesian3.clone(camera.position);
          var transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
          camera.lookAtTransform(transform, offset);
        }
      },
      viewInICRF() {
        Sandcastle.declare(this.viewInICRF);
        let viewer = this.viewer
        let Cesium = this.Cesium
        let scene = this.viewer.scene
        viewer.camera.flyHome(0);
        viewer.clock.multiplier = 3 * 60 * 60;
        scene.postUpdate.addEventListener(this.icrf);
        scene.globe.enableLighting = true;
      },
      cameraEvents() {
        Sandcastle.declare(this.cameraEvents);
        let viewer = this.viewer
        let Cesium = this.Cesium
        var camera = viewer.camera;
        this.removeStart = camera.moveStart.addEventListener(function() {
          this.viewChanged.style.display = "block";
        });
        //console.log('dd', this.removeStart)
        this.removeEnd = camera.moveEnd.addEventListener(function() {
          this.viewChanged.style.display = "none";
        });
      },
      cameraChanges() {
        Sandcastle.declare(this.cameraChanges);
        var i = 0;
        this.removeChanged = this.viewer.camera.changed.addEventListener(function(
          percentage
        ) {
          ++i;
          this.cameraChanged.innerText =
            "Camera Changed: " + i + ", " + percentage.toFixed(6);
          this.cameraChanged.style.display = "block";
        });
      },
      flyInACity() {
        Sandcastle.declare(this.flyInACity);
        let Cesium = this.Cesium
        var camera = this.viewer.scene.camera;
        camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            -73.98580932617188,
            40.74843406689482,
            363.34038727246224
          ),
          complete: function() {
            setTimeout(function() {
              camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(
                  -73.98585975679403,
                  40.75759944127251,
                  186.50838555841779
                ),
                orientation: {
                  heading: Cesium.Math.toRadians(200.0),
                  pitch: Cesium.Math.toRadians(-50.0),
                },
                easingFunction: Cesium.EasingFunction.LINEAR_NONE,
              });
            }, 1000);
          },
        });
      },
      losAngelesToTokyo(adjustPitch) {
        var camera = this.viewer.scene.camera;
        let Cesium = this.Cesium
        var tokyoOptions = {
          destination: Cesium.Cartesian3.fromDegrees(
            139.8148,
            35.7142,
            20000.0
          ),
          orientation: {
            heading: Cesium.Math.toRadians(15.0),
            pitch: Cesium.Math.toRadians(-60),
            roll: 0.0,
          },
          duration: 20,
          flyOverLongitude: Cesium.Math.toRadians(60.0),
        };

        var laOptions = {
          destination: Cesium.Cartesian3.fromDegrees(
            -117.729,
            34.457,
            10000.0
          ),
          duration: 5,
          orientation: {
            heading: Cesium.Math.toRadians(-15.0),
            pitch: -Cesium.Math.PI_OVER_FOUR,
            roll: 0.0,
          },
        };

        laOptions.complete = function() {
          setTimeout(function() {
            camera.flyTo(tokyoOptions);
          }, 1000);
        };

        if (adjustPitch) {
          tokyoOptions.pitchAdjustHeight = 1000;
          laOptions.pitchAdjustHeight = 1000;
        }

        camera.flyTo(laOptions);
      },
      flyOverLongitude(adjustPitch) {
        Sandcastle.declare(this.flyOverLongitude);
        this.losAngelesToTokyo();
      },
      flyOverLongitudeWithPitch() {
        Sandcastle.declare(this.flyOverLongitudeWithPitch);
        this.losAngelesToTokyo(true);
      },
      reset() {
        let Cesium = this.Cesium
        let viewer = this.viewer;
        let scene = this.viewer.scene;
        scene.completeMorph();
        viewer.entities.removeAll();
        scene.primitives.remove(this.referenceFramePrimitive);
        scene.tweens.removeAll();

        if (Cesium.defined(this.removeStart)) {
          this.removeStart();
          this.removeEnd();

          viewChanged.style.display = "none";

          this.removeStart = undefined;
          this.removeEnd = undefined;
        }

        if (Cesium.defined(this.removeChanged)) {
          this.removeChanged();
          this.removeChanged = undefined;

          cameraChanged.style.display = "none";
        }

        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

        viewer.clock.multiplier = 1.0;
        scene.postUpdate.removeEventListener(this.icrf);
        scene.globe.enableLighting = false;
      },
    },
  }
</script>

<style scoped="scoped">
  .container {
    width: 100%;
    height: 100%;
  }

  #cesiumContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    /*  overflow: hidden; */
  }

  @import url(../../libs/templates/bucket.css);

  #viewChanged,
  #cameraChanged {
    display: none;
    background-color: red;
    color: white;
  }
</style>
